<template style="height: 100%">

  <div>
    <i-notice-bar icon="systemprompt" closable>
      2018年世界杯,将于6月14日至7月15日举行
    </i-notice-bar>
    <div class="header">
      <i-row top="40">
        <i-col span="14" i-class="col-class" offset="1">
          <div class="left">
            <i-avatar v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" size="large"></i-avatar>
          </div>
          <div class="left plr-20">
            <p class="fontBig">{{userInfo.nickName}}</p>
            <p class="fontNorwal">一句话介绍我自己</p>
          </div>
        </i-col>
        <i-col span="9" i-class="col-class">
          <span class="wx-cards-17">我的交友卡片&nbsp;&gt;</span>
        </i-col>
      </i-row>
    </div>

    <div class="grad-3">
      <i-grid>
        <i-grid-item @tap="money">
          <i-grid-icon class="wx-grad">
            <i-icon class="wx-grad-icon" type="transaction_fill" size="35" color="#fff"/>
          </i-grid-icon>
          <i-grid-label>小fa钱包</i-grid-label>
        </i-grid-item>
        <i-grid-item>
          <i-grid-icon class="wx-grad">
            <i-icon class="wx-grad-icon" type="createtask_fill" size="30" color="#fff"/>
          </i-grid-icon>
          <i-grid-label>契约档案</i-grid-label>
        </i-grid-item>
        <i-grid-item>
          <i-grid-icon class="wx-grad">
            <i-icon class="wx-grad-icon" type="message_fill" size="30" color="#fff"/>
          </i-grid-icon>
          <i-grid-label>系统消息</i-grid-label>
        </i-grid-item>
      </i-grid>
    </div>
    <div>
      <i-cell-group>
        <i-cell title="我喜欢的" is-link url="./love">
          <i-icon type="like" size="20" color="#f759ab" slot="icon"/>
        </i-cell>
        <i-cell title="心动邀请" is-link url="./invitation">
          <i-icon type="mail" size="20" color="#f759ab" slot="icon"/>
        </i-cell>
        <i-cell title="通知开关" is-link url="./switch">
          <i-icon type="remind" size="20" color="#f759ab" slot="icon"/>
        </i-cell>
      </i-cell-group>
    </div>
    <div>
      <i-row i-class="row-class" top="40">
        <i-col span="8" i-class="col-class" offset="1">
          <p class="btn-style">客服中心</p>
        </i-col>
        <i-col span="8" offset="7" i-class="col-class" center="right">
          <p class="btn-style btn-style-center">问题反馈</p>
        </i-col>
      </i-row>
    </div>
    <!--<div style="overflow: hidden">-->
    <!--<i-tab-bar :current="current" fixed="true" color="#f759ab" @change="handleChange">-->
    <!--<i-tab-bar-item key="integral" icon="integral" current-icon="integral" size="28"></i-tab-bar-item>-->
    <!--<i-tab-bar-item key="emoji" icon="emoji" current-icon="emoji" size="50"></i-tab-bar-item>-->
    <!--<i-tab-bar-item key="addressbook" icon="addressbook" current-icon="addressbook" size="28"></i-tab-bar-item>-->
    <!--</i-tab-bar>-->
    <!--</div>-->

  </div>

</template>
<script>


  export default {
    mpType: 'page',
    data() {
      return {
        motto: 'Hello World',
        userInfo: {},
        current: 'addressbook'
      }
    },
    components: {},
    computed() {
      let self = this
      wx.getStorage({
        key: 'currentPage',
        success(res) {
          let mp = {'detail': {'key': res.data}}
          self.handleChange({mp})
        }
      })

    },
    mounted() {
    },
    methods: {
      money() {
        wx.navigateTo({
          url: 'mCard'
        })
      },
      getUserInfo() {
        // 调用登录接口
        wx.login({
          success: () => {
            wx.getUserInfo({
              success: (res) => {
                this.userInfo = res.userInfo
              }
            })
          }
        })
      },

      clickHandle(msg, ev) {
        console.log('clickHandle:', msg, ev)
      },
//      handleChange({mp}) {
//        let currentBar = mp.detail.key
//        this.current = currentBar
//        wx.setStorage({
//          key: 'currentPage',
//          data: currentBar
//        })
//        let url = ''
//        switch (currentBar) {
//          case 'addressbook':
//            url = 'index'
//            break
//          case '/emoji':
//            url = ''
//            break
//          case 'integral':
//            url = 'home'
//            break
//        }
////        this.$router.push(url)
//        wx.switchTab({
//          url: url
//        })
//      }
    },
    created() {
      // 调用应用实例的方法获取全局数据
      this.getUserInfo()
    }
  }
</script>

<style scoped>
  .plr-20 {
    padding: 0 20rpx;
    overflow: hidden;
  }

  .header {
    height: 270rpx;
    background-color: #f993a6;
    overflow: hidden;
  }

  .left {
    float: left;
  }

  .btn-style {
    border: 1px solid #777;
    color: #777;
    font-size: 22rpx;
    border-radius: 20rpx;
    text-align: center;
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
  }

  .btn-style-center {
    float: right;
    margin-right: 24rpx;
  }

  .fontNorwal {
    color: #fff;
    font-size: 26rpx;
  }

  .fontBig {
    color: #fff;
    font-size: 36rpx;
  }

  .wx-cards-17 {
    border: 2rpx solid #d994a2;
    background-color: #fff;
    color: #ee7091;
    border-radius: 30rpx;
    text-align: center;
    display: block;
    height: 55rpx;
    line-height: 55rpx;
    font-size: 26rpx;
    width: 231rpx;
    margin-top: 20rpx;
  }
</style>
